<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图标定位二三事</title>
    <style>
      body {
        font: 14px/1.4 'Microsoft YaHei';
        background-color: #edeff0;
      }
      body,
      h3,
      h5 {
        margin: 0;
      }
      img {
        border: 0 none;
        vertical-align: bottom;
      }
      .l {
        float: left;
      }
      .r {
        float: right;
      }
      .constr {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
      }

      .course {
        padding-top: 10px;
      }
      .course-list {
        float: left;
        width: 280px;
        height: 240px;
        margin: 5px 10px 15px;
        border-radius: 0 0 1px 1px;
        background-color: #f7faf9;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0 1px 2px #c5c5c5;
        text-decoration: none;
      }
      .course-list-img {
        background-color: #6396f1;
      }
      .course-list-h {
        line-height: 50px;
        font-size: 14px;
        font-weight: 400;
        color: #363d40;
        text-align: center;
      }
      .course-list-tips {
        margin: 0 14px;
        font-size: 12px;
        color: #b4bbbf;
        overflow: hidden;
      }

      .icon-recom {
        position: absolute;
        line-height: 20px;
        padding: 0 5px;
        background-color: #f60;
        color: #fff;
        font-size: 12px;
      }
      .icon-vip {
        position: absolute;
        width: 36px;
        height: 36px;
        margin-left: -36px;
        background: url(/src/assets/QuestionFilled.svg);
        text-indent: -9em;
        overflow: hidden;
      }

      body {
        background-color: #ddd;
      }
      img {
        vertical-align: bottom;
      }
      .container {
        display: inline-block;
        position: relative;
      }
      .cover {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: blue;
        opacity: 0.5;
        filter: alpha(opacity=50);
      }

      div.test {
        display: inline-block;
      }
      .red {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        position: relative;
        background-color: yellow;
      }
      .green {
        width: 100px;
        height: 100px;
        border: 1px solid green;
      }
      .left {
        left: -50px;
      }
      .container {
        border: 1px solid green;
        padding: 30px;
        background-color: green;
        background-clip: content-box; /*将背景裁剪到内容框，方便看绝对定位元素效果*/
        position: absolute;
      }

      .icon-hot {
        position: absolute;
        width: 28px;
        height: 11px;
        margin: -6px 0 0 2px;
        background-color: red;
        background: url(src/assets/dian.jpg);
      }
    </style>
  </head>

  <body>
    <!--
        1、初始包含块（Initial containing block），即根元素的包含框。 在浏览器中是原点与 canvas 原点重合、大小与 viewport 相同的矩形。
        2、position:static|relative 元素包含块为最近的块级【block|list-item|table】父元素的内容框content-box
        3、positon:absolute 先找absolute最近已定位祖先元素【没有的话包含块就是初始包含块】
            如果祖先元素是块级元素，则包含块是祖先元素的padding框。
            如果祖先元素是内联元素，包含块取决于祖先元素的direction属性
                dirrection:ltr,祖先元素的第一个盒子的上、左padding框边界是包含块的上和左，祖先元素最后一个盒子的下、右padding边界是包含块的下和右。
                direction:rtl，祖先元素的第一个盒子的上、右padding框边界是包含块的上和右，祖先元素最后一个元素的下、左padding框边界是包含块的下和左。
        4、positon:fixed 元素的包含块是由viewport决定的，和根元素无关。
    -->
    <p style="border: 1px solid red; width: 200px; padding: 20px">
      TTT
      <span style="background-color: rebeccapurple; position: relative; padding: 10px">
        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。
        <em style="position: absolute; color: red; top: 0; left: 0">XX</em> <em style="position: absolute; color: yellow; top: 20px; left: 0">XX</em>
        <em style="position: absolute; color: blue; bottom: 0; right: 0">XX</em>
      </span>
    </p>

    <p style="border: 1px solid red; width: 200px; padding: 20px; direction: rtl">
      T
      <span style="background-color: #c0c0c0; position: relative; padding: 10px">
        这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们
        <em style="position: absolute; color: red; top: 0; left: 0">XX</em> <em style="position: absolute; color: yellow; top: 20px; left: 0">XX</em>
        <em style="position: absolute; color: blue; bottom: 0; right: 0">XX</em>
      </span>
    </p>

    <div class="test red left">第一个元素</div>
    <div class="test green">第二个元素</div>
    <div class="test red left">第三个元素</div>
    <!--
     因为position:absolute会改变元素的display属性【类似浮动】，inline变成block
    -->
    <!-- <span class="container">内容</span><span>a</span> -->
    <div class="container">内容2</div>

    <!-- <h3>
      <a href="#"> 新项目 <i class="icon-hot"></i> </a>
    </h3>
    <a href="#">新项目</a><img src="src/assets/dian.jpg" style="margin-bottom: 15px" /> -->

    <div class="main">
      <div class="constr">
        <div class="course">
          <a href="http://www.imooc.com/view/121" class="course-list">
            <div class="course-list-img">
              <span class="icon-recom">推荐</span>
              <img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="/src/assets/dian.jpg" />
              <i class="icon-vip">vip</i>
            </div>
            <h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
            <div class="course-list-tips">
              <span class="l">已完结</span>
              <span class="r">3514人学习</span>
            </div>
          </a>
        </div>
      </div>
      <span class="container">
        <i class="cover"></i>
        <img src="/src/assets/dian.jpg" width="100" height="100" />
      </span>
    </div>
  </body>
</html>
